<% if @user.access_locked? %>
  <div class="crayons-notice crayons-notice--danger py-2 pr-2 mb-3 flex justify-between items-center">
    <p class="flex-1 flex">
      <%= crayons_icon_tag(:lock, title: t("views.admin.users.profile.locked.icon"), class: "mr-2") %>
      <%= t("views.admin.users.profile.locked.text") %>
    </p>
    <%= link_to t("views.admin.users.profile.locked.unlock"), unlock_access_admin_user_path(@user), method: :patch, class: "c-link c-link--block c-link--branded" %>
  </div>
<% end %>

<section class="crayons-card flex flex-col l:flex-row gap-2 m:gap-4 l:gap-6 mb-2 m:mb-3 p-3 s:p-4 m:p-7">
  <span class="crayons-avatar crayons-avatar--xl m:crayons-avatar--2xl l:crayons-avatar--3xl">
    <img src="<%= @user.profile_image_url_for(length: 192) %>" width="100%" height="100%" alt="<%= @user.name %> profile picture">
  </span>
  <div class="grid gap-2 flex-1">
    <div class="s:flex items-center gap-5">
      <div class="flex flex-1 items-center">
        <h1 class="crayons-title lh-tight">
          <%= @user.name %>
        </h1>
        <%= render partial: "admin/users/show/profile/status", locals: { user: @user} %>
      </div>
      <%= render "admin/users/show/profile/actions" %>
    </div>
    <div class="fs-s mb-1 color-secondary">
      @<%= @user.username %> <span class="opacity-50">&bull;</span> <%= t("views.admin.users.profile.id", userid: @user.id) %> <span class="opacity-50">&bull;</span>
      <% if @user.registered? %>
        <%= t("views.admin.users.profile.since_html", time: tag.time(l(@user.created_at, format: :short_with_yy), datetime: @user.created_at.strftime("%Y-%m-%dT%H:%M:%S%z"), title: l(@user.created_at, format: :admin_user))) %>
      <% else %>
        <span class="color-accent-danger fw-medium"><%= t("views.admin.users.profile.not_member") %></span>
      <% end %>
    </div>
    <div>
      <ul class="flex flex-col s:flex-row gap-3 s:gap-6 flex-wrap">
        <li>
          <a href="mailto:<%= @user.email %>" class="c-link c-link--icon-left inline-block" target="_blank">
            <%= crayons_icon_tag(:email, title: t("views.admin.users.profile.email"), class: "c-link__icon") %>
            <%= @user.email %>
          </a>
        </li>
        <% if @user.github_username %>
          <li>
            <a href="https://github.com/<%= @user.github_username %>" class="c-link c-link--icon-left inline-block" target="_blank">
              <%= crayons_icon_tag(:github, title: t("views.admin.users.profile.github")) %>
              <%= @user.github_username %>
            </a>
          </li>
        <% end %>
        <% if @user.twitter_username %>
          <li>
            <a href="https://twitter.com/<%= @user.twitter_username %>" class="c-link c-link--icon-left inline-block" target="_blank">
              <%= crayons_icon_tag(:twitter, title: t("views.admin.users.profile.twitter")) %>
              <%= @user.twitter_username %>
            </a>
          </li>
        <% end %>
      </ul>
    </div>
  </div>
</section>
